<template>
    <div></div>
</template>
<script>
import * as THREE from 'three';
// 目标：控制3D物体的移动

// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

// 1、创建场景
const scene = new THREE.Scene();

// 2、创建相机(角度、屏幕宽度/屏幕高度、最小、最大)
const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000);
//    相机位置
camera.position.set(0,0,10);
//    相机添加到场景中
scene.add(camera);

// 3、添加物体
//    创建几何体
const cubeGeometry = new THREE.BoxGeometry(1,1,1);
//    几何体基本材质
const cubeMaterial = new THREE.MeshBasicMaterial({
  color:0xffff00
});
//    根据几何体创建材质
const cube = new THREE.Mesh(cubeGeometry,cubeMaterial);

//    修改物体位置
// cube.position.set(5,0,0);
// cube.position.x = 1;

//    缩放
// cube.scale.set(3,2,1);
cube.scale.x = 5;

//    旋转 Math.PI = 180°
cube.rotation.set(Math.PI / 4,0,0 , "XYZ");

//    将几何体添加到材质
scene.add(cube);

// 4、初始化渲染器
const renderer = new THREE.WebGLRenderer();
//    设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight);
//    将webgl渲染的canvas内容添加到body中
document.body.appendChild(renderer.domElement);
//    使用渲染器，通过相机将场景渲染
// renderer.render(scene,camera)

// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement);

// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper();
scene.add(axesHelper);
    function render(){
      cube.position.x += 0.01;
      cube.rotation.x += 0.01;
      if(cube.position.x > 5) {
        cube.position.x = 0;
      }
      renderer.render(scene,camera);
      // 渲染下一帧的时候就会调用render函数
      requestAnimationFrame(render);
    }

render();

export default {
  data(){
    return{}
  },
  // created(){
  //   this.render();
  // },
  // methods:{
  //   render(){
  //     renderer.render(scene,camera);
  //     // 渲染下一帧的时候就会调用render函数
  //     requestAnimationFrame(render);
  //   }
  // }
}
</script>